import { List, Modal, Tag } from 'antd';

import Number from '@/components/Number';

function ShowMoreModal({
  showModal,
  setShowModal,
  value,
  coverage,
  rate,
  p_date,
  handleDeleteTag,
}) {
  return (
    <Modal open={showModal} onCancel={() => setShowModal(false)} footer={null}>
      <>
        <div style={{ marginTop: '30px', marginBottom: '20px' }}>
          <h3>当前标签详情 </h3>
          <p style={{ marginBottom: '5px' }}>
            {`当前的使用数据日期为: ${p_date || '-'}`}{' '}
          </p>
          <div style={{ display: 'flex' }}>
            <div style={{ marginRight: '20px' }}>
              覆盖人数：{<Number showTip format="short" value={coverage} />} 人{' '}
            </div>
            <div>覆盖度：{rate ?? '-'}</div>
          </div>
        </div>
        <List
          style={{ height: 300, overflow: 'scroll' }}
          dataSource={value}
          renderItem={({ value }) => {
            return (
              <Tag
                key={value}
                closable
                onClose={() => handleDeleteTag(value)}
                style={{ marginTop: 5 }}
              >
                {value}
              </Tag>
            );
          }}
        />
      </>
    </Modal>
  );
}

export default ShowMoreModal;
